<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>经营企业</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">
        <!-- Modal 企业风险信息详情 -->
        <div class="modal fade" id="myModal-de">
            <div class="modal-dialog" style="width:1120px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业风险信息详情</h4>
                    </div>
                    <div class="modal-body">
                        <div class="space-box">
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">企业</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">GSP</a>
                                </div>
                                <div class="right-txt">
                                    <p>企业名称：<span>浙江普康生物技术有限公司</span></p>
                                    <p>许可证编号：XXXXXXXXXXXX</p>
                                    <p>发证日期：2019-07-1</p>
                                    <p>有效期至：2019-07-1</p>
                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">信源
                                    </a>
                                </div>
                                <div class="right-txt">
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>违法行为</td>
                                                        <td>性质</td>

                                                    </tr>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>时间</td>
                                                        <td>处罚内容</td>
                                                        <td>罚款金额</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>
                                                                想
                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="class-p">
                                        <div class="a-table-list">
                                            <table>
                                                <colgroup>
                                                    <col style="width:90px" />
                                                    <col />
                                                    <col />

                                                </colgroup>
                                                <thead>
                                                    <tr>
                                                        <td>序号</td>
                                                        <td>缺陷条款</td>
                                                        <td>缺陷内容</td>


                                                    </tr>
                                                </thead>
                                            </table>
                                            <div class="scroll-content"
                                                style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                                <table>
                                                    <colgroup>
                                                        <col style="width:90px" />
                                                        <col />
                                                        <col />

                                                    </colgroup>

                                                    <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>

                                                            <td>
                                                                想
                                                            </td>
                                                        <tr>
                                                            <td>1</td>
                                                            <td class="eli">
                                                                10000

                                                            </td>
                                                            <td>0</td>



                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="space-items">
                                <div class="left-main">
                                    <a href="javascript:;">模型</a>
                                </div>
                                <div class="right-txt">
                                    <!-- <textarea class="form-control" disabled style="height: 104px;"></textarea> -->

                                    <textarea class="form-control" style="height: 104px;"></textarea>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 企业信息列表 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业信息列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>企业名称</td>
                                        <td>监测评分</td>
                                        <td>企业风险画像</td>
                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                10000

                                            </td>
                                            <td>0</td>
                                            <td>
                                                <span data-toggle="modal" data-target="#myModal2"
                                                    class="a-click-style">企业画像</span>
                                            </td>
                                        <tr>
                                            <td>1</td>
                                            <td class="eli">
                                                10000

                                            </td>
                                            <td>0</td>
                                            <td>
                                                <span data-toggle="modal" data-target="#myModal2"
                                                    class="a-click-style">企业画像</span>
                                            </td>


                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Modal 详细信息-->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog" style="width:1020px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">详细信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">

                            <div class="scroll-content" style="max-height:450px;overflow-y: auto;overflow-x: hidden;">
                                <div class="detail-titi">
                                    <span style="color:#FF292A;font-size:22px;    display: inline-block;
                                    vertical-align: text-bottom;"> 监测评分：97分</span>
                                    <a style="float: right;" class="btn-white-icon" href="./fxhx.html">
                                        <img src="../src/img/jyqy/icon_stgz2.png" alt="">
                                        <span>企业画像</span>

                                    </a>
                                </div>
                                <table>
                                    <colgroup>
                                        <col style="width:155px" />
                                        <col />
                                        <col style="width:155px" />
                                        <col />
                                    </colgroup>
                                    <tbody class="a-table-list-b">
                                        <tr>
                                            <th>企业名称</th>
                                            <td class="eli">
                                                XX医药物流有限公司

                                            </td>
                                            <th>经营许可证编号</th>
                                            <td>
                                                <span class="a-click-style">浙20040181</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>注册地址</th>
                                            <td class="eli">
                                                XX省XX市XX县

                                            </td>
                                            <th>经营方式</th>
                                            <td>
                                                <span class="a-click-style">批发</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>法定代表人</th>
                                            <td class="eli">
                                                宋禹衡

                                            </td>
                                            <th>企业负责人</th>
                                            <td>
                                                <span class="a-click-style">胡栋</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>质量负责人</th>
                                            <td class="eli">
                                                胡利平

                                            </td>
                                            <th>发证机关</th>
                                            <td>
                                                <span class="a-click-style">XX省食品药品监督管理局</span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <th>发证日期</th>
                                            <td class="eli">
                                                2018年11月2日

                                            </td>
                                            <th>有效期至</th>
                                            <td>
                                                <span class="a-click-style">2033年11月1日</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>仓库地址</th>
                                            <td colspan="3" class="eli">
                                                胡利平
                                            </td>

                                        </tr>
                                        <tr>
                                            <th>经营范围</th>
                                            <td colspan="3" class="eli">
                                                生物制品（含疫苗）；生化药品
                                            </td>

                                        </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./ltcp.html" class="ltcp ">
                            <span class="badge">2</span>

                            流通产品
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="jyqy on">
                            <span class="badge">2</span>
                            经营企业
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qtxx.html" class="qtxx">
                            <span class="badge">2</span>

                            其他信息
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <div class="jyqy-wrapper clearfix">
                        <div class="jyqy-left">
                            <div class="map-box">
                                <div class="map"></div>
                                <div class="map-search">
                                    <table>
                                        <colgroup>
                                            <col style="width:80px;">
                                            <col style="width:310px;">

                                            <col>
                                        </colgroup>

                                        <tbody>
                                            <tr>
                                                <td>区域：</td>
                                                <td>
                                                    <select name="" class="form-control" id="">
                                                        <option value="2"></option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button class="a-btn">搜索</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>企业分类：</td>
                                                <td>
                                                    <select name="" class="form-control" id="">
                                                        <option value="2">1</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <button data-toggle="modal" data-target="#myModal"
                                                        class="a-btn">列表模式</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>流通品类：</td>
                                                <td>
                                                    <select name="" class="form-control" id="">
                                                        <option value="2">1</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <!-- <button class="a-btn">搜索</button> -->
                                                </td>
                                            </tr>
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                            <div class="chart-box-b">
                                <div class="a-tit">各区域监测及处置情况</div>
                                <div id="main-bar" style="width: 100%;height:272px;"></div>
                            </div>
                        </div>
                        <div class="jyqy-right">
                            <div class="a-tit">最新企业监测提醒</div>
                            <div class="jyqy-table-list scroll-container">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                        <tr>
                                            <td class="eli">杭州华东医药集团有限公司风险指数超限</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="marquee-box">
                                <marquee id="affiche" align="left" behavior="scroll" vspace="20" loop="-1"
                                    scrollamount="10" scrolldelay="100" onMouseOut="this.start()"
                                    onMouseOver="this.stop()">
                                    预处置风险：华东医药集团有限公司风险指数超限</marquee>
                            </div>
                            <div class="line"></div>
                            <div class="r-bottom-box">
                                <div class="r-bottom-box-nav" id="r-bottom-box-nav">
                                    <span>信源</span>
                                    <span>模型</span>
                                    <span>企业</span>
                                    <span>产品</span>
                                    <span class="on">处置</span>
                                </div>
                                <div class="r-bottom-box-con">
                                    <table>
                                        <colgroup>
                                            <col style="width:114px">
                                            <col>
                                        </colgroup>
                                        <tbody>

                                            <tr>
                                                <td>会商确定类型：</td>
                                                <td>
                                                    <input type="text" value="预警处置" class="form-control">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">会商意见：</td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <textarea class="form-control" name="" style="height:174px;"
                                                        id=""></textarea>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="text-align: right">
                                                    <button class="a-btn">提交</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>


    <script>
        $(function () {

            $('#r-bottom-box-nav').on('click', 'span', function () {
                $(this).addClass('on').siblings().removeClass('on')
                $('#myModal-de').modal();
            })
            // 加载显示测试  不需要可删除

            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()

            // shwoPie()
            // showmap()
            chartLine()


        })


        function chartLine() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main-bar'));
            // 指定图表的配置项和数据

            var legendData = ['预警数量', '处置数量']
            var lableList = ['杭州', '宁波', '嘉兴', '湖州', '金华', '温州', '丽水', '衢州', '绍兴', '台州', '舟山']

            var dataList = [
                [1, 20, 160, 1, 2, 3, 7, 8, 9, 0, 1],
                [1, 20, 160, 1, 2, 3, 7, 8, 9, 0, 1]
            ]
            var option = {
                color: ['#F8E71C', '#00C601', '#BD10E0', '#52FFFD', '#BCEB4D', '#F5A623', '#E75656', '#5C13FE',
                    '#669F2B', '#AA671D', '#2289F2', '#E82177'
                ],
                grid: {
                    left: 80,
                    top: 40,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：次',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10,
                    top: 10
                },
                legend: {
                    data: legendData,
                    top: 0,
                    x: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: dataList.map(function (item, index) {
                    var a = {
                        name: legendData[index],
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: dataList[index],
                        // symbol: 'circle', //
                        symbolSize: 12
                    }
                    return a


                })



                // [{
                //     name: '全省',
                //     type: 'line',
                //     data: dataList[0],
                //     // symbol: 'circle', //
                //     symbolSize: 12
                // }, {
                //     name: '杭州',
                //     type: 'line',
                //     data: dataList[1],
                //     symbolSize: 12
                // }, ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }
    </script>

</body>

</html>